<template>
  <div id="seeGatewayEnv">
    <div class="bg-color-fff">
      <p class="title-pad20 fontbold">接口基本信息</p>
      <el-form :model="gwInfoForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
      <el-row>
        <el-col :push=2 :span=10>
          <el-form-item label="网关环境编号:" prop="gwEnvCode">
            <el-input v-model="gwInfoForm.gwEnvCode" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :push=2 :span=10>
          <el-form-item label="网关环境名称:" prop="gwEnvName">
            <el-input v-model="gwInfoForm.gwEnvName" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :push=2 :span=10>
          <el-form-item label="网关外部访问地址:" prop="gwEnvUrl">
            <el-input v-model="gwInfoForm.gwEnvUrl" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :push=2 :span=10>
          <el-form-item label="网关部署地址:" prop="gwEnvAddress">
            <el-input v-model="gwInfoForm.gwEnvAddress" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :push=2 :span=10>
          <el-form-item label="服务环境描述信息:" prop="gwEnvDesc">
            <el-input v-model="gwInfoForm.gwEnvDesc" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :push=2 :span=10>
          <el-form-item label="是否鉴权:" prop="gwGrantFlag">
            <el-switch v-model="gwInfoForm.gwGrantFlag" disabled></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </div>
    <div style="clear:both"></div>
    <!-- 报文头定义-请求参数 -->
    <div class="marigin-top10 bg-color-fff">
      <p class="title-pad20 fontbold">报文头定义-请求参数</p>
      <el-table :data="reqPacketList" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column prop="fieldRequired" label="是否必输	"></el-table-column>
        <el-table-column prop="fieldLength" label="长度	"></el-table-column>
        <el-table-column prop="fieldName" label="描述	"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码	"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值	"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
      </el-table>
    </div>
    <!-- 报文头定义-响应参数 -->
    <div class="marigin-top10 bg-color-fff">
      <p class="title-pad20 fontbold">报文头定义-响应参数</p>
      <el-table :data="resData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fieldCode" label="参数"></el-table-column>
        <el-table-column prop="fieldType" label="类型"></el-table-column>
        <el-table-column prop="fieldRequired" label="是否必输	"></el-table-column>
        <el-table-column prop="fieldLength" label="最大长度	"></el-table-column>
        <el-table-column prop="fieldName" label="描述	"></el-table-column>
        <el-table-column prop="fieldEncoding" label="编码	"></el-table-column>
        <el-table-column prop="fieldDefVal" label="示例值	"></el-table-column>
        <el-table-column prop="fieldPattern" label="检查规则"></el-table-column>
      </el-table>
    </div>
    <!-- 接口定义-异常信息 -->
    <div class="marigin-top10 bg-color-fff">
      <p class="title-pad20 fontbold">接口定义-异常信息</p>
      <el-table :data="errData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="errorCode" label="错误代码"></el-table-column>
        <el-table-column prop="errorMsg" label="错误信息"></el-table-column>
        <el-table-column prop="errorDesc" label="描述"></el-table-column>
      </el-table>
    </div>
    <!-- 过滤器信息 -->
    <div class="marigin-top10 bg-color-fff">
      <p class="title-pad20 fontbold">过滤器信息</p>
      <el-table :data="filterData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="filterCode" label="过滤器编号"></el-table-column>
        <el-table-column prop="filterName" label="过滤器名称"></el-table-column>
        <el-table-column prop="createTime" label="设置时间"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import api from '../../../../../api/url'
import ajax from '../../../../../api/ajax/ajax'
export default {
  name: 'seeGatewayEnv',
  data () {
    return {
      reqPacketList: [],
      gwEnvId: '',
      gwInfoForm: {},
      resData: [],
      errData: [],
      filterData: []
    }
  },
  methods: {
    // 将fieldRequired字段的值改为字符串
    changeString (data) {
      data.map(item => {
        if (item.fieldRequired === true) {
          item.fieldRequired = '是'
        } else {
          item.fieldRequired = '否'
        }
        return item
      })
    },
    // 查看tab页所有数据
    seeTabAllFn () {
      let postId = {
        gwEnvId: this.gwEnvId
      }
      // 报文头
      ajax.post(api.LIST_GW_LINKPACK, postId).then(res => {
        this.changeString(res.reqPacketList)
        this.changeString(res.resPacketList)
        this.reqPacketList = res.reqPacketList
        this.resData = res.resPacketList
      }).catch(err => {
        console.info(err)
      })
      // 接口异常信息
      ajax.post(api.LIST_GW_LINK_ERR, postId).then(res => {
        this.errData = res.list
      }).catch(err => {
        console.info(err)
      })
      // 过滤信息
      ajax.post(api.LIST_API_FILTER, {pageNum: '1', pageSize: '20'}).then(res => {
        this.filterData = res.list
      }).catch(err => {
        console.info(err)
      })
    }
  },
  mounted () {
    this.$on('seeGwEnvData', ({selectData, id}) => {
      this.gwInfoForm = selectData
      this.gwEnvId = id
      this.seeTabAllFn()
    })
  },
  created () {
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #seeGatewayEnv
    padding-bottom 10px
    .marigin-top10
      margin-top 10px
      .el-form-item__label
        width 120px
      .el-form-item
        margin-bottom 10px
      .el-select
      .el-input
        width 100%
      .el-col-10
        margin-top 10px
    .bg-color-fff
      background #ffffff
      padding-bottom 20px
      .title-pad20
        display inline-block
        height: 40px
        line-height 40px
        padding-left 20px
</style>
